<template>
    <div style="padding-top: 20px;">
        <div style="margin-bottom: 10%">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="企业信息"/>
                <el-step title="企业员工基本情况录入"/>
            </el-steps>
            <div v-if="active === 0">
                <div class="tip">
                    <p>企业信息</p>
                </div>
                <div class="wrap clearfix" style="margin: 0 15px;">
                    <div class="item clearfix">
                        <div class="left">企业名称：</div>
                        <div class="over">{{companyInfo.name | nullFilter}}</div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">企业类型：</div>
                        <div class="over">
                            <span v-if="!companyInfo.unitType">暂无数据</span>
                            <el-tag type='info' v-else class="rit5" v-for="tag in split(companyInfo.unitType)">
                                {{tag}}
                            </el-tag>
                        </div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">企业地址：</div>
                        <div class="over">{{companyInfo.address | nullFilter}}</div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">企业规模：</div>
                        <div class="over">{{companyInfo.companyScale | nullFilter}}</div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">联系人1：</div>
                        <div class="over">{{companyInfo.contactPeople1 | nullFilter}}</div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">联系人1手机：</div>
                        <div class="over">{{companyInfo.phone | nullFilter}}</div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">联系人2：</div>
                        <div class="over">{{companyInfo.contactPeople2 | nullFilter}}</div>
                    </div>
                    <div class="item clearfix">
                        <div class="left">联系人2手机：</div>
                        <div class="over">{{companyInfo.phone2 | nullFilter}}</div>
                    </div>
                </div>
                <div style="height: 20px"></div>
            </div>
            <div v-if="active === 1">
                <div class="tip">
                    <p>企业员工基本情况录入</p>
                </div>
                <div class="wrap">
                    <el-form ref="form" :model="data" label-width="138px" size="mini">
                        <el-form-item label="数据所属月份" required="true">
                            <el-date-picker v-model="data.dataMonth"
                                            type="month"
                                            style="width: 100%"
                                            value-format="yyyy-MM"
                                            @blur="this.dateChange"
                                            placeholder="选择月">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="在职员工总数" required="true">
                            <el-input type="number" :step="1" :min="0" v-model="data.inWorkPeopleCount"
                                      placeholder="暂无数据"/>
                        </el-form-item>
                        <!-- 二级标题 -->
                        <div class="title">岗位类型</div>
                        <el-row>
                            <el-col :span="24" v-for="jobType in jobTypeList">
                                <div class="grid-content bg-purple">
                                    <el-form-item :label="jobType+':'" required="true">
                                        <el-input type="number" v-model="data.jobType[jobType]" placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="title">人员类型</div>
                        <el-row>
                            <el-col :span="24" v-for="peopleType in peopleTypeList">
                                <div class="grid-content bg-purple">
                                    <el-form-item :label="peopleType+':'" required="true">
                                        <el-input type="number" v-model="data.peopleType[peopleType]"
                                                  placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="title">学历</div>
                        <el-row>
                            <el-col :span="24" v-for="learnLevel in learnLevelList">
                                <div class="grid-content bg-purple">
                                    <el-form-item :label="learnLevel+':'" required="true">
                                        <el-input type="number" v-model="data.learnLevel[learnLevel]"
                                                  placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="title">性别</div>
                        <el-row class="width-60">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item :label="'男:'" required="true">
                                        <el-input type="number" v-model="data.sex['男']" placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item :label="'女:'" required="true">
                                        <el-input type="number" v-model="data.sex['女']" placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="title">年龄段</div>
                        <el-row>
                            <el-col :span="24" v-for="peopleAge in peopleAgeList">
                                <div class="grid-content bg-purple">
                                    <el-form-item :label="peopleAge+':'" required="true">
                                        <el-input type="number" v-model="data.peopleAge[peopleAge]" placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="title">政治面貌</div>
                        <el-row>
                            <el-col :span="24" v-for="politicsFace in politicsFaceList">
                                <div class="grid-content bg-purple">
                                    <el-form-item :label="politicsFace+':'" required="true">
                                        <el-input type="number" v-model="data.politicsFace[politicsFace]"
                                                  placeholder="暂无数据"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="toolbar-bottom-right">
            <el-button v-if="active !== 0" type="primary" @click="lastStep">查看企业信息</el-button>
            <el-button v-if="active !== 1" type="primary" @click="next">填写表单</el-button>
            <el-button v-else type="primary" @click="insert">保存</el-button>
            <el-button @click="back('WxIndex')">取消</el-button>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Emit, Prop} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {getStorage, getUserInfo} from "@/core/utils/storage";
    import {verdictDate} from "@/core/utils/validate";
    import {MessageBox} from 'mint-ui';
    import {Toast} from 'mint-ui';
    import {copy} from "@/core/utils/Utils";

    @Component({
        name: 'InWorkHumanWx',
        components: {},
    })
    export default class InWorkHumanWx extends mixins(BaseVue, Kit) {

        active: number = 1;

        data: any = {
            dataMonth: new Date(),
            jobType: {},
            peopleType: {},
            learnLevel: {},
            sex: {},
            peopleAge: {},
            politicsFace: {}
        };

        companyInfo: any = {};

        jobTypeList: any = [];
        peopleTypeList: any = [];
        learnLevelList: any = [];
        peopleAgeList: any = [];
        politicsFaceList: any = [];

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        mRules = {
            dataMonth: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            // 查询用户企业
            $http.post(API.companyInfoByUserId, {id: getUserInfo().id}).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    this.companyInfo = res.data;
                    this.data.companyId = res.data.id;
                    this.dateChange();
                } else {
                    Toast({
                        message: '操作失败',
                        position: 'bottom',
                        duration: 3000
                    });
                }
            });
            let date = new Date();
            let month = date.getMonth() + 1;
            let mm: string;
            if (month < 10) {
                mm = "0" + month;
            } else {
                mm = month.toString();
            }
            this.data.dataMonth = date.getFullYear() + "-" + mm;
            this.jobTypeList = getStorage("jobType");
            this.peopleTypeList = getStorage("peopleType");
            this.learnLevelList = getStorage("learnLevel");
            this.peopleAgeList = getStorage("peopleAge");
            this.politicsFaceList = getStorage("politicsFace");
        }

        dateChange() {
            if (!this.data.dataMonth) {
                return;
            }
            if (!verdictDate(this.data.dataMonth)) {
                this.data.dataMonth += "-01";
            }
            $http.post(API.inWorkHumanInfoByMonth, {
                dataMonth: this.data.dataMonth,
                companyId: this.data.companyId
            }).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    if (res.data) {
                        this.data = res.data;
                        this.data.jobType = JSON.parse(this.data.jobType);
                        this.data.peopleType = JSON.parse(this.data.peopleType);
                        this.data.learnLevel = JSON.parse(this.data.learnLevel);
                        this.data.sex = JSON.parse(this.data.sex);
                        this.data.peopleAge = JSON.parse(this.data.peopleAge);
                        this.data.politicsFace = JSON.parse(this.data.politicsFace);
                        MessageBox({
                            title: '提示',
                            message: '当前选中月份存在数据,重复填写提交,会覆盖原有数据。',
                            showCancelButton: false
                        })
                    } else {
                        this.data = {
                            dataMonth: this.data.dataMonth,
                            companyId: this.companyInfo.id,
                            jobType: this.data.jobType,
                            peopleType: this.data.peopleType,
                            learnLevel: this.data.learnLevel,
                            sex: this.data.sex,
                            peopleAge: this.data.peopleAge,
                            politicsFace: this.data.politicsFace
                        }
                    }
                } else {
                    Toast({
                        message: '操作失败',
                        position: 'bottom',
                        duration: 3000
                    });
                }
            });
        }

        //添加用户
        insert() {
            if (!this.data.dataMonth) {
                Toast({message: '请选择数据所属月份！', position: 'bottom', duration: 3000});
                return;
            }
            // 校验岗位类型
            let jobTypeListSum = 0;
            for (let i in this.jobTypeList) {
                if (!this.data.jobType[this.jobTypeList[i]]) {
                    Toast({message: '请填写' + this.jobTypeList[i] + '人数！', position: 'bottom', duration: 3000});
                    return;
                }
                jobTypeListSum += Number(this.data.jobType[this.jobTypeList[i]]);
            }

            if (this.data.inWorkPeopleCount != jobTypeListSum) {
                Toast({message: '岗位类型人数之和，应该等于在职员工总数!', position: 'bottom', duration: 3000});
                return;
            }
            // 校验人员类型
            let peopleTypeListSum = 0;
            for (let i in this.peopleTypeList) {
                if (!this.data.peopleType[this.peopleTypeList[i]]) {
                    Toast({message: '请填写' + this.peopleTypeList[i] + '人数！', position: 'bottom', duration: 3000});
                    return;
                }
                peopleTypeListSum += Number(this.data.peopleType[this.peopleTypeList[i]]);
            }
            if (this.data.inWorkPeopleCount != peopleTypeListSum) {
                Toast({message: '人员类型人数之和，应该等于在职员工总数!', position: 'bottom', duration: 3000});
                return;
            }
            // 校验学历
            let learnLevelListSum = 0;
            for (let i in this.learnLevelList) {
                if (!this.data.learnLevel[this.learnLevelList[i]]) {
                    Toast({message: '请填写' + this.learnLevelList[i] + '人数！', position: 'bottom', duration: 3000});
                    return;
                }
                learnLevelListSum += Number(this.data.learnLevel[this.learnLevelList[i]]);
            }
            if (this.data.inWorkPeopleCount != learnLevelListSum) {
                Toast({message: '学历人数之和，应该等于在职员工总数!', position: 'bottom', duration: 3000});
                return;
            }
            // 校验性别
            if (!this.data.sex['男']) {
                Toast({message: '请填写男人数！', position: 'bottom', duration: 3000});
                return;
            }
            if (!this.data.sex['女']) {
                Toast({message: '请填写女人数！', position: 'bottom', duration: 3000});
                return;
            }
            if (this.data.inWorkPeopleCount != (Number(this.data.sex['男']) + Number(this.data.sex['女']))) {
                Toast({message: '性别人数之和，应该等于在职员工总数！', position: 'bottom', duration: 3000});
                return;
            }
            // 校验年龄段
            let peopleAgeListSum = 0;
            for (let i in this.peopleAgeList) {
                if (!this.data.peopleAge[this.peopleAgeList[i]]) {
                    Toast({message: '请填写' + this.peopleAgeList[i] + '人数！', position: 'bottom', duration: 3000});
                    return;
                }
                peopleAgeListSum += Number(this.data.peopleAge[this.peopleAgeList[i]]);
            }
            if(this.data.inWorkPeopleCount != peopleAgeListSum){
                Toast({message: '年龄段人数之和，应该等于在职员工总数！', position: 'bottom', duration: 3000});
                return;
            }
            // 校验政治面貌
            let politicsFaceListSum = 0;
            for (let i in this.politicsFaceList) {
                if (!this.data.politicsFace[this.politicsFaceList[i]]) {
                    Toast({message: '请填写' + this.politicsFaceList[i] + '人数！', position: 'bottom', duration: 3000});
                    return;
                }
                politicsFaceListSum += Number(this.data.politicsFace[this.politicsFaceList[i]]);
            }
            if(this.data.inWorkPeopleCount != politicsFaceListSum){
                Toast({message: '政治面貌人数之和，应该等于在职员工总数！', position: 'bottom', duration: 3000});
                return;
            }

            // 校验完整
            if (!verdictDate(this.data.dataMonth)) {
                this.data.dataMonth += "-01";
            }
            let data = copy(this.data);
            data.jobType = JSON.stringify(data.jobType);
            data.peopleType = JSON.stringify(data.peopleType);
            data.learnLevel = JSON.stringify(data.learnLevel);
            data.sex = JSON.stringify(data.sex);
            data.peopleAge = JSON.stringify(data.peopleAge);
            data.politicsFace = JSON.stringify(data.politicsFace);
            $http.post(API.inWorkHumanInfoInsert, data).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    Toast({
                        message: '操作成功',
                        position: 'bottom',
                        duration: 3000
                    });
                } else {
                    Toast({
                        message: '操作失败',
                        position: 'bottom',
                        duration: 3000
                    });
                }
            });
        }

        // 上一步按钮
        lastStep() {
            this.active--;
        }

        // 下一步按钮
        next() {
            this.active++;
            if (this.active > 2) this.active = 0;
        }
    }
</script>

<style scoped lang="scss">
    .title {
        color: #1890ff;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #f1f1f1;
        margin-bottom: 20px;
    }

    .tip {
        padding: 1px 16px;
        background-color: #ecf8ff;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        margin: 10px 0;
    }

    .el-form {
        padding: 15px;
    }

    .el-select {
        width: 100%;
    }

    .el-radio {
        width: 50%;
        margin-right: 0;
        margin-top: 5px;
    }

    .item {
        width: 100%;
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px dashed #f1f1f1;
    }

    .item:last-child {
        border: none;
    }

    .item .left {
        float: left;
        width: 120px;
        line-height: 1.4;
        color: #333;
        text-align: right;
        margin-right: 10px;
    }

    .item .over {
        overflow: hidden;
        line-height: 1.4;
        color: #999;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }

</style>
